<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">已报名</block>
		</cu-custom>
		
		<scroll-view scroll-x class="bg-white nav text-center" :style="[{top:CustomBar + 'px'}]">
			<view class="cu-item" :style="[{width:CustomWid+'%'},{margin:0+'rpx'}]" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in sublist" :key="index" @tap="tabSelect"
			 :data-id="index" :data-sid="item.id">
				{{item.name}}
			</view>
		</scroll-view>
		<view class="cu-bar  search flex">
			<view class="flex-fiv padding-t">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="输入搜索的关键词" v-model="searchval" @blur="search_cs" confirm-type="search"></input>
				</view>
			</view>
		</view>
		
		<view class="ybm-info">
			<view class="ybm-unum">已报名:{{perusers.count}}人</view>
			<view class="ybm-list" v-for="(item,index) in perusers.umlist" :key="index" >
				<view class="ybm-um flex">
					<view class="ybm-um-index">{{index+1}}</view>
					<view class="ybm-um-name">{{item.name}}</view>
					<view class="ybm-um-tel">{{item.tel}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option){
			this.mid=option.mid;
			this.userid=uni.getStorageSync("uid");
			this.openid=uni.getStorageSync('openid');
			
		},
		onShow() {
			uni.showLoading({
				title:'加载中..'
			})
			uni.request({
				url:"https://www.52tennis.cn/Match/GetSubList",
				data: {
					matchid:this.mid
				},
				success:(data)=> {
					if(data.data.result==1){
						this.sublist=data.data.returnjson;
						this.CustomWid= (100/this.sublist.length);
						this.sid=this.sublist[0].id;
						uni.request({
							url:"https://www.52tennis.cn/Match/GetMatchPerJoin",
							data: {
								matchid:this.mid,
								subid:this.sid,
								pagesize:100,
								currpage:1,
								name:this.searchval
							},
							success:(data)=> {
								if(data.data.result==1){
									this.perusers=data.data.returnjson
									//if(data.data.returnjson)
								}else{
									this.perusers.count=0;
									this.perusers.umlist=null;
								}
							},
						})
						
						
					}else{
						uni.showToast({
							title: '数据错误',
							icon: 'fail',
							mask: true,
							duration: 3000
						})
					}
				},
				complete:()=>{
					uni.hideLoading();
				}
			})
		},
		data() {
			return {
				mid:0,
				sublist:[],
				TabCur: 0,
				CustomBar: this.CustomBar,
				CustomWid:50,
				searchval:'',
				perusers:{count:0,umlist:null},
				sid:"",
			}
		},
		methods: {
			tabSelect(e){
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.sid = e.currentTarget.dataset.sid;
				uni.showLoading({
					title:'加载中..'
				});
				uni.request({
					url:"https://www.52tennis.cn/Match/GetMatchPerJoin",
					data: {
						matchid:this.mid,
						subid:this.sid,
						pagesize:100,
						currpage:1,
						name:this.searchval
					},
					success:(data)=> {
						//uni.hideLoading();
						if(data.data.result==1){
							this.perusers=data.data.returnjson
						}else{
							this.perusers.count=0;
							this.perusers.umlist=null;
						}
					},
					complete:()=>{
						uni.hideLoading();
					}
				})
			},
			search_cs(e){
				uni.showLoading({
					title:'加载中..'
				});
				uni.request({
					url:"https://www.52tennis.cn/Match/GetMatchPerJoin",
					data: {
						matchid:this.mid,
						subid:this.sid,
						pagesize:100,
						currpage:1,
						name:this.searchval
					},
					success:(data)=> {
						//uni.hideLoading();
						if(data.data.result==1){
							this.perusers=data.data.returnjson
						}else{
							this.perusers.count=0;
							this.perusers.umlist=null;
						}
					},
					complete:()=>{
						uni.hideLoading();
					}
				})
			}
		}
	}
</script>

<style>
	.ybm-info{
		padding:30rpx 60rpx;
	}
	.ybm-unum{
		padding-bottom: 20rpx;
	}
	.ybm-um{
		border: 1rpx solid #808080;
		border-bottom: none;
		height: 45rpx;
		line-height: 45rpx;
		text-align: center;
	}
	.ybm-list:last-child .ybm-um{
		border-bottom: 1rpx solid #808080;
	}
	.ybm-um-index{
		width:10%;
		border-right: 1rpx solid #808080;
	}
	.ybm-um-name{
		width:50%;
	}
</style>
